const electron = require('electron')
const Menu = electron.remote.Menu


class NativeMenu {


    run(context: EditorApiSystem) {

        let template = [
            {
                label: "File",
                submenu: [
                    {
                        label: "Save", click: () => {
                            context.executeCommand("Save", null);
                        }
                    }
                ]
            },
            {
                label: 'Edit',
                submenu: [{
                    label: 'Copy ',
                    accelerator: 'CmdOrCtrl+C',
                    role: 'copy'
                }, {
                    label: 'Paste',
                    accelerator: 'CmdOrCtrl+V',
                    role: 'paste'
                }
                ]
            },
            {
                label: 'Window ',
                role: 'window',
                submenu: [{
                    label: 'Minimize',
                    accelerator: 'CmdOrCtrl+M',
                    role: 'minimize'
                }, {
                    label: 'Close',
                    accelerator: 'CmdOrCtrl+W',
                    role: 'close'
                }, {
                    label: '切换开发者工具',
                    accelerator: (function () {
                        if (process.platform === 'darwin') {
                            return 'Alt+Command+I'
                        } else {
                            return 'Ctrl+Shift+I'
                        }
                    })(),
                    click: function (item, focusedWindow) {
                        if (focusedWindow) {
                            focusedWindow.toggleDevTools()
                        }
                    }
                }, {
                    type: 'separator'
                }]
            },
            {
                label: 'Help',
                role: 'help',
                submenu: []
            }
        ]

        const menu = Menu.buildFromTemplate(template)
        Menu.setApplicationMenu(menu) // 设置菜单部分
    }

}



class HierarchyPanel {

    private tree: InspireTree;
    private context: EditorApiSystem;


    run(context: EditorApiSystem) {
        this.context = context;
        const customContainer = document.getElementById('hierarchyPanel');
        customContainer.style.color = '#fefefe';
        this.tree = new InspireTree({
            data: []
        } as any);
        new InspireTreeDOM(this.tree, {
            target: customContainer
        });


    }

    update(data: HierarchyNode) {


        function buildTreeData(data: HierarchyNode): NodeConfig & { uuid: number } {
            return { text: data.name, children: data.children.map(buildTreeData), uuid: data.uuid }
        }

        const treeData = buildTreeData(data);

        this.tree.load([treeData])
        this.tree.expandDeep();
        this.tree.on('node.selected', (value) => {
            this.context.executeCommand('SelectGameObject', value.uuid);
        })
    }
}


class InspectorPanel {

    private context: EditorApiSystem;

    run(context: EditorApiSystem) {
        this.context = context;

    }

    update(data: InspectorData) {

        // var customContainer = document.getElementById('inspectorPanel');
        // for (let child of customContainer.children) {
        //     child.remove()
        // }
        this.clear();

        const gui = new dat.GUI({ autoPlace: false });

        const folder = gui.addFolder(data.name);


        folder.open();
        for (const behaviour of data.behaviours) {
            const behaviourFolder = folder.addFolder(behaviour.name);
            behaviourFolder.open();

            const obj: any = {};
            for (const property of behaviour.properties) {

                obj[property.key] = property.value;

                if (Array.isArray(obj[property.key])) {
                    const childFolder = behaviourFolder.addFolder(property.key);
                    childFolder.open();
                    const keys = Object.keys(obj[property.key]);
                    let i = 0;
                    for (let item of obj[property.key]) {

                        childFolder.add(obj[property.key], keys[i]).onChange((value) => {

                            //setInspectorData(data.name, behaviour.name, property.key, value);

                            this.context.executeCommand("ModifyBehaviourProperty", {
                                objName: data.name,
                                objId: data.uuid,
                                behaviourId: behaviour.uuid,
                                behaviourName: behaviour.name,
                                key: property.key,
                                newValue: value
                            })


                        });

                        i++;
                    }



                } else {
                    //prefab
                    behaviourFolder.add(obj, property.key).onChange((value) => {

                        //setInspectorData(data.name, behaviour.name, property.key, value);
                        this.context.executeCommand("ModifyBehaviourProperty", {
                            objName: data.name,
                            objId: data.uuid,
                            behaviourId: behaviour.uuid,
                            behaviourName: behaviour.name,
                            key: property.key,
                            newValue: value
                        })

                        console.log()
                    });;

                }

            }

            if (behaviour.name != "Transform" && behaviour.name != "ChangableValueForPrefab")
                folder.add({
                    Delete: () => {
                        //console.log(behaviour);
                        this.context.executeCommand("RemoveBehaviour", behaviour);
                    }
                }, "Delete");

        }


        const folder2 = gui.addFolder("Tools");
        folder2.open();

        const controller = folder2.add({
            addComponent: ""
        }, "addComponent", core.getAllBehaviourClassName());
        controller.onChange((value) => {
            this.context.executeCommand("AddBehaviourOnGameObject", {
                uuid: data.uuid,
                behaviourName: value,
            })
        })

        folder2.add({
            Add_Child: () => {
                this.context.executeCommand("AddGameObject", data.uuid);
            }
        }, "Add_Child");

        folder2.add({
            Delete_This: () => {
                this.context.executeCommand("DeleteGameObject", data.uuid);
            }
        }, "Delete_This");


        const customContainer = document.getElementById('inspectorPanel');
        //customContainer.style.marginBottom = "0";
        customContainer.appendChild(gui.domElement);
    }

    clear() {
        const customContainer = document.getElementById('inspectorPanel');
        for (const child of customContainer.children) {
            child.remove()
        }
    }
}


class ResourcePanel {

    private context: EditorApiSystem;

    run(context: EditorApiSystem) {

        this.clear();
        this.context = context;
        //console.log('execute resource panel run')
        const div = document.getElementById("resourcePanel");
        div.style.display = "inline";

        const icon1 = new FileIcon();
        icon1.create("new scene");
        const view1 = icon1.getView();
        div.appendChild(view1);
        view1.onclick = () => {
            context.executeCommand("CreateScene", null);
        }

        const icon2 = new FileIcon();
        icon2.create("delete scene");
        const view2 = icon2.getView();
        div.appendChild(view2);
        view2.onclick = () => {
            context.executeCommand("DeleteScene", null);
        }

        const scenes = core.configData.scenes;
        for (let scene of scenes) {
            const icon = new FileIcon();
            icon.create(scene);
            const view = icon.getView();
            div.appendChild(view);
            view.onclick = () => {
                context.executeCommand("ChangeScene", scene)
                //console.log('切换场景')
            }
        }

    }

    clear() {
        const customContainer = document.getElementById('resourcePanel');

        for (const child of customContainer.children) {
            //console.log(child);
            //child.remove();
            setTimeout(() => {
                child.remove();
            }, 0);
        }


    }
}

class FileIcon {

    private view = document.createElement("div");

    create(labelName: string) {
        const img = document.createElement("img");
        img.src = './editor/ui/file-icon.png';
        img.style.width = '16px'
        const label = document.createElement('p');
        label.innerText = labelName;
        label.style.color = 'white';
        label.style.display = "inline";
        this.view.appendChild(img);
        this.view.appendChild(label);
    }

    getView() {
        return this.view;
    }
}



const nativeMenu = new NativeMenu();

const hierachyPanel = new HierarchyPanel();

const insepectorPanel = new InspectorPanel();

const resourcePanel = new ResourcePanel();
